<template>
  <div>
    <h2>商品清单如下：</h2>
    <p v-for="({ shopName, price }, index) in eatArr" :key="index">
      {{ shopName }}:{{ price }}元/份
    </p>
    <h3>选择产品数量：</h3>
    <p v-for="({ shopName, count }, index) in eatArr" :key="index + 's'">
      {{ shopName }}<button @click="add(index)">+</button>{{ count
      }}<button @click="del(index)">-</button>
    </p>
    <h3 style="color: red">总数为：{{ sum }}元</h3>
  </div>
</template>

<script>
export default {
  // name: "",
  components: {},
  props: {
    eatArr: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    sum() {
      return this.eatArr.reduce((a, b) => a + b.count * b.price, 0);
    },
  },
  watch: {},
  created() {},
  methods: {
    add(value) {
      this.$emit("add", [value, this.eatArr[value].count + 1]);
    },
    del(value) {
      if ((value, this.eatArr[value].count > 0)) {
        this.$emit("del", [value, this.eatArr[value].count - 1]);
      } else {
        this.$emit("del", [value, 0]);
      }
    },
  },
};
</script>

<style scoped></style>
